<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>TouchSlider — JavaScript slide content</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<script src="../js/jquery.min.js"></script>
	
	
	<link href="../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../styles/kendo.default.min.css" rel="stylesheet" />
    <link href="../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../styles/jquery.shadow.css" />
    <link href="../jqueryUI/css/custom-theme/jquery-ui-1.9.2.custom.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../styles/touchslider.css">
    <link rel="stylesheet" type="text/css" href="../styles/index-tablet.css">
    

    <script src="../js/kendo.all.min.js"></script>
    <script src="../Controller/mainStoreTabletR.js"></script>
    
    <script src="../Controller/SMI_salePerDay.js"></script><!-- graph1 -->
	<script src="../Controller/SMI_SalePerMonth.js"></script><!-- graph2 -->
	<script src="../Controller/SMI_CustomerPerMonth.js"></script><!-- graph3 -->
	<script src="../Controller/SMI_BillPerMonth.js"></script><!-- graph4 -->
	<script src="../Controller/SMI_SalePerBill.js"></script> <!--  graph5--> 
	<script src="../Controller/SMI_DeptWastePerDay.js"></script> <!--  graph6-->
	<script src="../Controller/SMI_SaleByFoodTypePerDay.js"></script> <!--  graph6-->
	
    <script src="../js/jquery.touchslider.js"></script>
    <script src="../js/jquery.shadow.js"></script>	
    <script type="text/javascript" src="../js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
	
	
	
</head>
<body>

<div id="dialogSlot" class="selectListSlot" style="display: none;" title="graph1">
<!-- content select slot start-->
	<div id="selectFav">
		<ul>
			<li>
				<div class="statusFav ballRed"></div>
				<div class="slotFavName">
					<a href="#">
						Slot#1 Name:Top 10 Product
					</a>
				</div>
			</li>
			<li><div class="statusFav ballGreen"></div><div class="slotFavName"><a href="#">Slot#2 Name:Empty</a></div></li>
			<li><div class="statusFav ballGreen"></div><div class="slotFavName"><a href="#">Slot#3 Name:Empty</a></div></li>
			<li><div class="statusFav ballRed" ></div><div class="slotFavName"><a href="#">Slot#4 Name:Top 10 Cooking Time</a></div></li>
			<li><div class="statusFav ballRed"></div><div class="slotFavName"><a href="#">Slot#5 Name:Customer Per Month</a></div></li>
		
		</ul>
	</div>
<!-- content select slot end-->

</div>

<section class="demo">
	<div class="demo-in">
		<div class="demo-in-in">
			<div class="touchslider touchslider-demo">
			
			
			
			<div class="touchslider-nav">
				<div id="boxL">
					<div id="button">
						<div id="btHideShow">
							<button class="hideShow ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">=</button>
							<div id="titleDashboardName">
							Store Management <div id="categroryNameTitle"></div>
							</div>
						</div>
					</div>
					
				</div>
				
				<div id="boxR">
					<!-- <a class="touchslider-prev"><span class="touchslider-prev-in">previous</span></a>-->
					<!-- 
					<a class="touchslider-nav-item touchslider-nav-item-current"></a>
					<a class="touchslider-nav-item"></a>
					<a class="touchslider-nav-item"></a>
					<a class="touchslider-nav-item"></a>
					 -->
					<!--<a class="touchslider-next"><span class="touchslider-next-in">next</span></a>-->
				</div>
				<br style="clear:both">
			</div>
				<div id="contentArea">
					 
					<div id="leftMenu" class="expansion">
						<!-- 
						<div id="boxContent">
							<div id="boxTitle">
								<div id="txt">
									เมนูหลัก(Main Manu)
								</div>
							</div>
							<ul>
								<li id="cate1"><a href="#">คน(5)</a></li>
								<li id="cate2"><a href="#">ขาย(6)</a></li>
								<li id="cate3"><a href="#">cost(6)</a></li>
								<li id="cate4"><a href="#">คุณภาพ	ระบบ(4)</a></li>
								<li id="cate5"><a href="#">บริการ(5)</a></li>
								<li id="myViewCate"><a href="#">My views(6)</a></li>
							</ul>
						</div>
						-->
					</div>
					
					<div class="subGraph">
						<div id="boxSubGraph" class="expansionSubGraph" >
							<ul>
								<li><a href="#">graph1</a></li>
								<li><a href="#">graph2</a></li>
								<li><a href="#">graph3</a></li>
								<li><a href="#">graph4</a></li>
							</ul>
							
						</div>
					</div>
					<div class="areaSettingExternal">
					
					</div>
					
				
					<div class="touchslider-viewport" style="width:990px;overflow:hidden;position:relative;height:470px">
						
					
						<div id="contentGraph" style="width:990px">
						<!-- LOOP FOR CREATE GRAPH HERE START -->
						
						<!-- 
							<div class="touchslider-item">
								<div class="contentGraph">
									<div class="graphTop" id="graph1">
										<div id="settingArea">
											<div class="setting">
												<span class="ui-icon ui-icon-gear"></span>
											</div>
										</div>	
										<div id="chartArea">
											
												<div class="chart"></div>
											
										</div>
									</div>	
														
									<div class="graphBottom">
										<div class="graphDetail">
										สรุปยอดจำหน่าย ประจำเดือนเมษายน 2556
										</div>
										<div class="graphAddFav" style="text-align:right">
											
											<button class="addMyView ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" >Add MyView</button>
										</div>
									</div>
								</div>
							</div>
							
							<div class="touchslider-item"><div class="contentGraph"><div class="graphTop" id="graph-0"><div id="settingArea"><div class="setting"><span class="ui-icon ui-icon-gear"></span></div></div><div id="chartArea"><div class="chart"></div></div></div><div class="graphBottom"><div class="graphDetail">กราฟ abcd 2556</div><div class="graphAddFav" style="text-align:right"><button class="addMyView ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" >Add MyView</button></div></div></div></div>
							
							<div class="touchslider-item"><div class="contentGraph"><div class="graphTop" id="graph-0"><div id="settingArea"><div class="setting"><span class="ui-icon ui-icon-gear"></span></div></div><div id="chartArea"><div class="chart"></div></div></div><div class="graphBottom"><div class="graphDetail">กราฟ abcd 2556</div><div class="graphAddFav" style="text-align:right"><button class="addMyView ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" >Add MyView</button></div></div></div></div>
							
							<div class="touchslider-item"><div class="contentGraph"><div class="graphTop" id="graph-0"><div id="settingArea"><div class="setting"><span class="ui-icon ui-icon-gear"></span></div></div><div id="chartArea"><div class="chart"></div></div></div><div class="graphBottom"><div class="graphDetail">กราฟ abcd 2556</div><div class="graphAddFav" style="text-align:right"><button class="addMyView ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" >Add MyView</button></div></div></div></div>
							
							<div class="touchslider-item"><div class="contentGraph"><div class="graphTop" id="graph-0"><div id="settingArea"><div class="setting"><span class="ui-icon ui-icon-gear"></span></div></div><div id="chartArea"><div class="chart"></div></div></div><div class="graphBottom"><div class="graphDetail">กราฟ abcd 2556</div><div class="graphAddFav" style="text-align:right"><button class="addMyView ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" >Add MyView</button></div></div></div></div>
							 -->
						
							
							
						<!-- LOOP FOR CREATE GRAPH HERE START -->
						</div>
					</div>
				</div>
			</div>
			
			
			
			
			
			
		</div>
	</div>
</section>


